<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>排行榜</title>
	</head>
	<body>
		<div id="app">
			<ul>
				<li>收藏榜</li>
				<li>排位, id , 小说名 , 收藏数</li>
				<li v-for="(b,index) in novelList">
					{{index + 1}} id:{{b.id}},{{b.novelName}},{{b.collectNumber}}
				</li>
			</ul>
			<button @click="getCollectionList"></button>

			<!--<ul>
				<li>更新榜</li>
				<li>排位,小说</li>
				<li v-for="(u,index) in updatelist">
					{{index + 1}} id:{{u.id}},{{u.name}}}
				</li>
			</ul>-->
			
		</div>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<!-- 官网提供的 axios 在线地址 -->
		<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js"></script>
		<script>
			let app = new Vue({
				el: '#app',
				data: {
					novelList: []
				},
				methods: {
					// 收藏榜
					getCollectionList: function() {
						let that = this
						axios.get("http://localhost:8082/ranking/collectionlist")
							.then(function(response) {
								console.log(response.data)
								that.novelList = response.data
								
							})
					},
					
//					methods: {
//					// 更新榜
//					getUpdatelist: function() {
//						let that = this
//						axios.get("http://localhost:8082/ranking/list2")
//							.then(function(response) {
//								console.log(response.data)
//								that.novelList = response.data
//							})
//					},
				created() {
					this.getCollectionList()
				}
			}
		})
		</script>
	</body>
</html>
